<template>
  <div style="height:80%">
    <img :src="url" ref="image" alt style="width:300px;height:300px;text-align:center;" />
    <div
      class="btn"
      style="display:flex; justify-content: space-between;font-size:18px;color:#fff;padding:22px 10px;"
    >
      <span @click="canle">取消</span>
      <span @click="confirm">确认</span>
    </div>
  </div>
</template>
<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
import { editUserinfo_api } from "@/api/user.js";
export default {
  props: ["url"],
  data() {
    return {
      myCropper: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.myCropper = new Cropper(this.$refs.image, {
        viewMode: 1, // 裁剪移动区域
        dragMode: "move", // 图片移动
        initialAspectRatio: 1,
        aspectRatio: 1, // 裁切框长宽比
        preview: ".before",
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false,
      });
      // .getCroppedCanvas({
      //   imageSmoothingQuality: "high",
      // })
      // .toDataURL("image/jpeg");
    },
    canle() {
      console.log("123");
      this.$emit("imgFunc");
    },
    confirm() {
      this.myCropper.getCroppedCanvas().toBlob(async (blob) => {
        const formData = new FormData();
        formData.append("photo", blob);
        const res = await editUserinfo_api(formData);
        // console.log(res, "000");
      });
      this.$emit("imgFunc");
    },
  },
};
</script>
<style lang='less' scoped>
// .cropper-container {
//   margin-top: 50px;
// }
</style>